<template>
  <div class="modal-map-content">
    <div class="map-header">
      <div class="map-header-content">
        <span class="action-map-cancel" @click="handleMapCancel"></span>
        <input type="text" id="suggestId" placeholder="请输入详细地址" v-model="address" class="input_style">
        <span class="action-map-sure" @click="handleMapSure">确定</span>
        <!--<div>{{userlocation}}</div>-->
      </div>
    </div>
    <div id="allmap"></div>
  </div>
</template>

<script>
  import { Toast} from 'mint-ui';
  export default {
    data () {
      return {
        address:null, //详细地址
        userlocation: {lng: "", lat: ""},
      }
    },
    mounted(){
      this.$nextTick(function () {

        var th = this
        // 创建Map实例
        var map = new BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new BMap.Point(121.160724,31.173277); // 创建点坐标，
        map.centerAndZoom(point, 14);
        map.enableScrollWheelZoom();
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
          }
          else {
            alert('failed'+this.getStatus());
          }
        },{enableHighAccuracy: true})


        // 添加定位控件
        var geolocationControl = new BMap.GeolocationControl();
        geolocationControl.addEventListener("locationSuccess", function(e){
          // 定位成功事件
          var address = '';
          address += e.addressComponent.province;
          address += e.addressComponent.city;
          address += e.addressComponent.district;
          address += e.addressComponent.street;
          address += e.addressComponent.streetNumber;
          th.address=address;
          th.userlocation = e.point;    //获取第一个智能搜索的结果
        });
        geolocationControl.addEventListener("locationError",function(e){
          // 定位失败事件
          alert(e.message);
        });
        map.addControl(geolocationControl);


        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
          {
            "input": "suggestId", "location": map
          })
        var myValue
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          th.address= myValue
          setPlace();
        });

        function setPlace() {
          map.clearOverlays();    //清除地图上所有覆盖物
          function myFun() {
            th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(th.userlocation, 18);
            map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
          }

          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);

          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click",function(e){
            function myFun() {
              th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
            }
            //经度
            console.log(th.userlocation.lng);
            //维度
            console.log(th.userlocation.lat);

          })
        }

      })
    },
    methods:{
      handleMapSure(){
        if(this.userlocation.lng!==''){
          this.$emit('mapClose');
          var placeData={
            address:this.address,
            xAxis:this.userlocation.lng,
            yAxis:this.userlocation.lat,
          }
          this.$emit('mapData',placeData)
        }else{
          Toast({
            message:"请选择详细地址",
            position: 'middle',
            duration: 1200
          });
        }
      },
      handleMapCancel(){
        this.$emit('mapClose');
      }
    }
  }
</script>
<style>
  .tangram-suggestion-main{
    /*top: 80px !important;*/
    left: 12px !important;
    width:93% !important;
    z-index:10000000;
    padding:24px 0 0;
  }
  .tangram-suggestion-main .tangram-suggestion{
    border:none !important;
    border-radius:5px;
    padding:12px 0;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
  }
  .tangram-suggestion-main .tangram-suggestion>div{
    display: none!important;
  }
  .tangram-suggestion-main .tangram-suggestion .route-icon{
    background: none;
    padding-left:3px;
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .tangram-suggestion-main .tangram-suggestion .route-icon:before{
    content: "\e609";
    margin-right: 6px;
  }
  .tangram-suggestion-main .tangram-suggestion table tr td{
    padding:5px 10px !important;
    font-size: 14px !important;
  }
  .modal-map-content{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    z-index:10;
  }
  .map-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index:20;
    padding:16px 12px;
  }
  .map-header-content{
    background: #fff;
    padding:5px 6px;
    border-radius:5px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
  }
  .input_style{
    display: inline-block;
    vertical-align: middle;
    width:70%;
    padding:10px 12px 10px 4px;
    border-radius:4px;
    font-family: "微软雅黑";
    outline:none;
    border:none;
    font-size: 15px;
  }
  .app-setting .app-main{
    padding:12px 0 0;
  }
  #allmap{
    position: fixed !important;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: "微软雅黑";
  }
  .action-map-cancel{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width:7%;
    height: 28px;
  }
  .action-map-cancel:before{
    border: 2px solid #c8c8cd;
    border-bottom-width: 0;
    border-left-width: 0;
    content: " ";
    top: 50%;
    left:8px;
    position: absolute;
    width:7px;
    height:7px;
    transform: translateY(-50%) rotate(-135deg);
  }

  .action-map-sure{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width:20%;
    padding:10px 0;
    font-size: 15px;
    text-align: center;
  }
  .action-map-sure:before{
    background: #ddd;
    width:1px;
    height:26px;
    position: absolute;
    top:8px;
    left:0;
    content: '';
  }
</style>
